<script setup lang="ts">
import { ref, watch } from "vue";
export interface FormProps {
  formInline: {
    status: any;
    feedback: any;
  };
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({ status: 0, feedback: "" })
});
const newFormInline = ref(props.formInline);
const statusOptions = [
  { value: 0, label: "待审核" },
  { value: 1, label: "审核中" },
  { value: 2, label: "审核成功" },
  { value: 3, label: "驳回" },
  { value: 4, label: "审核失败" },
  { value: 5, label: "已完成" },
  { value: 6, label: "取消" }
];

const feedbackStatus = ref(false);
watch(
  () => newFormInline.value.status,
  newValue => {
    if (newValue === 3 || newValue === 4) {
      feedbackStatus.value = true;
    } else {
      feedbackStatus.value = false;
      newFormInline.value.feedback = "";
    }
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <el-form :model="newFormInline">
    <el-form-item label="状态">
      <el-select
        v-model="newFormInline.status"
        class="!w-[220px]"
        placeholder="请选择状态"
      >
        <el-option
          v-for="(item, index) in statusOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="feedbackStatus === true" label="状态">
      <el-input
        v-model="newFormInline.feedback"
        placeholder="审核未成功原因"
        type="textarea"
      />
    </el-form-item>
  </el-form>
</template>
